<template>
  <div class="col-sm-12">
    <div class="form-horizontal">

      <div class="form-horizontal">
        <div class="site-bgcolor">

          <div class="form-group">
            <label for="titleAdd" class="col-sm-2 control-label">title</label>

            <div class="col-sm-4">
              <input class="form-control" id="titleAdd" name="titleAdd"
                     v-model="item.title">
            </div>
          </div>

          <form id="uploadForm" action="http://euvee.vicp.co/File" method="post"
                enctype="multipart/form-data" name="uploadForm">
            <div class="form-group">
              <textarea name="contentAdd" id="contentAdd">&lt;p&gt;Initial editor content.&lt;/p&gt;</textarea>
            </div>

          </form>

          <div class="form-group">
            <div class="col-sm-3 col-md-push-9">
              <button class="btn btn-default" v-on:click="onCancelClick()">取消</button>
              <button class="btn btn-default" v-on:click="onSubmitClick(file)">提交</button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .site-bgcolor {
    background: AliceBlue
  }
</style>
<script>
  export default {
    name: 'itemEdit',
    data: function () {
      return {
        uuid: ''
      }
    },
    props: ['titleAdd', 'mode', 'url', 'contentAdd', 'item'],
    components: {},
    methods: {
      onCancelClick: function () {
        this.$dispatch('component', 'modeList')
      },
      onSubmitClick: function () {
        var formData = new window.FormData(document.forms.namedItem('uploadForm'))
        if (this.mode === 'modeAddNew') {
          this.$http.post(this.url, this.item).then(function (response) {
            this.uuid = response.data.uuid
            console.log(this.uuid)
            var suffix = response.data.originname.substring(response.data.originname.lastIndexOf('.') + 1)
            formData.append('name', response.data.uuid + '.' + suffix)
            formData.append('file', document.forms.namedItem('uploadForm'))
            this.upload(formData)
            this.$dispatch('finditem')
            this.$dispatch('component', 'modeList')
            window.alert('提交成功 ')
            this.item = {}
          }, function (response) {
            window.alert('failed to save,Probably failed to connect the backend server! Pls check your server status! ')
          })
        } else {
          this.$http.put(this.url + this.item.id, this.item).then(function (response) {
            window.alert('修改成功 ')
            this.$dispatch('component', 'modeList')
          }, function (response) {
            this.$dispatch('finditem')
            window.alert('failed to update,Probably failed to connect the backend server! Pls check your server status! ')
          })
        }
      },
      upload: function (formData) {
        this.$http.post('http://euvee.vicp.co/rest/file', formData).then(function (response) {
        }, function (response) {
          window.alert('文件提交失败! 状态码：' + response.status)
        })
      }
    }
  }
</script>
